﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
    <link href="../../scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    html,body
    {
        padding:0;
        margin:0;
        border:0;     
        width:100%;
        height:100%;
        overflow:hidden;   
    }
    </style>
</head>
<body>
    <div class="mini-toolbar"  borderStyle="border-width:0;border-bottom-width:1px;">
         
        名字：
        <input class="mini-textbox" id="key" />   
        <a class="mini-button" onclick="search()">查询</a>
    </div>
    <div class="mini-fit">

        

        <table cellpadding="0" cellspacing="0" style="width:100%;table-layout:fixed;height:100%;">
            <tr>
                <td style="width:50%"">
                    <div class="mini-fit">
                    <div id="grid1" class="mini-datagrid" style="width:100%;height:100%;" 
                        showPageSize="false" showPageIndex="false"
                        pagerStyle="padding:2px;" onrowdblclick="addSelected()"
                        multiSelect="true" url="../data/AjaxService.jsp?method=SearchEmployees"
                        
                    >
                        <div property="columns">
                            <div type="checkcolumn" ></div>
                            <div field="name" width="150" headerAlign="center" allowSort="true">员工</div>
                        </div>
                    </div>
                </div>
                </td>
                <td style="width:80px;text-align:center;vertical-align:top;padding-top:10px;">
                    <a class="mini-button" style="width:60px;" onclick="addSelected()">选择</a>
                    
                    <a class="mini-button" style="width:60px;margin-top:10px;" onclick="removeSelecteds()">删除</a>
                </td>
                <td style="width:50%"">
                    <div class="mini-fit">
                         <div id="grid2" class="mini-datagrid" style="width:100%;height:100%;" 
                            showPageSize="false" showPageIndex="false"
                            pagerStyle="padding:2px;" onrowdblclick="removeSelecteds()"
                            multiSelect="true" showPager="false"
                        
                        >
                            <div property="columns">
                                <div type="checkcolumn" ></div>
                                <div field="name" width="150" headerAlign="center" allowSort="true">员工</div>
                            </div>
                        </div>              
                    </div>       
                </td>
            </tr>
        </table>
    
    </div>                
    <div class="mini-toolbar" style="text-align:center;padding-top:8px;padding-bottom:8px;" borderStyle="border-width:0;border-top-width:1px;">
        <a class="mini-button" style="width:60px;" onclick="onOk()">确定</a>
        <span style="display:inline-block;width:25px;"></span>
        <a class="mini-button" style="width:60px;" onclick="onCancel()">取消</a>
    </div>

</body>
</html>
<script type="text/javascript">
    mini.parse();

    var grid1 = mini.get("grid1");
    var grid2 = mini.get("grid2");

    function search() {
        var key = mini.get("key").getValue();
        grid1.load({ key: key });
    }

    //////////////////////////////////////////////////////////////////////////////////////////////////////////

    grid1.on("load", function (e) {

        if (firstLoad) {
            firstLoad = false;
            if (initIds) {
                var rows = [];
                for (var i = 0, l = initIds.length; i < l; i++) {
                    var o = grid1.getRow(initIds[i]);
                    if (o) rows.push(o);
                }
                grid1.selects(rows);
                addSelected();
            }
        }
    });

    var firstLoad = true;
    var initIds;                   //存放初始数据id，这个作为选中数据。
    function SetData(ids) {

        if (typeof ids == "string") {
            ids = ids.split(",");     //"1,2" => [1, 2]
        }
        initIds = ids;

        grid1.load();
        grid1.deselectAll();
        grid2.clearRows();
    }

    function GetData() {
        var rows = grid2.getData();
        var ids = [], texts = [];
        for (var i = 0, l = rows.length; i < l; i++) {
            var row = rows[i];
            ids.push(row.id);
            texts.push(row.name);
        }

        var data = {};
        data.id = ids.join(",");
        data.text = texts.join(",");
        return data;
    }

    function addSelected() {
        
        var items = grid1.getSelecteds();
        grid1.removeRows(items);
        grid2.addRows(items);
    }

    function removeSelecteds() {

        var items = grid2.getSelecteds();
        grid2.removeRows(items);
        grid1.addRows(items);
    }

    //////////////////////////////////////////////////////////////////////////////////////////////////////////

    function CloseWindow(action) {
        if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);
        else window.close();
    }

    function onOk() {
        CloseWindow("ok");
    }
    function onCancel() {
        CloseWindow("cancel");
    }

    
</script>